<template>
<el-dialog
    :title="!agentId ? '新增' : '修改'"
    :close-on-click-modal="false"
    width="35%"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px" :hide-required-asterisk='true'>
    <div style="display:flex" class="first-row">
    <el-form-item label="姓名" prop="agentName">
        <el-input v-model="dataForm.agentName" placeholder="代理商姓名"></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="agentPhone">
        <el-input v-model="dataForm.agentPhone" placeholder="电话"></el-input>
    </el-form-item>
        
    </div>
    <el-form-item label="地址">
			<v-distpicker @selected="addrSelect" @province='province' @city='city' @area='area' :province="dataForm.province" :city="dataForm.city" :area="dataForm.agentAddress"></v-distpicker>        
    </el-form-item>
    <el-form-item label="备注" prop="remark">
        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取消</el-button>
    <!-- <el-button @click="testFun">获取dataform</el-button> -->
    <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

    <myMap v-if="mapVisible"
            ref="myMap"
            @getAddress="getAddress"></myMap>
</el-dialog>
</template>

<script>
import { isEmail, isMobile } from '@/utils/validate'
import myMap from '../../common/map'
import BaiduMap from '../../../utils/map'
import VDistpicker from 'v-distpicker'


export default {
	data() {
		return {
			BaiduMap:BaiduMap,
			visible: false,
			mapVisible:false,
			agentId: null,
			showAddress:'',
			dataForm:{
				agentName: '',
				agentPhone: '',
				agentLat: '',
				agentLng: '',
				agentAddress: '',
				remark: '',
				province: '',
        city: '',
        agentAddress: '',

			},
			dataRule:{
				agentName:[
					{required: true, message:'店铺名', trigger: 'blur'}
				],
				mobile:[
					{required: true, message:'请输入', trigger: 'blur'}
				]
			}
		}
			
	},

	components:{
			myMap,
			VDistpicker
	},

	methods: {
		init (row) {
			this.dataForm = {}
			this.showAddress = ''
			if (row) {
				this.agentId = row.agentId
				this.dataForm = row
			}
			this.visible = true
			},

		// 表单提交
		dataFormSubmit () {
			this.$refs['dataForm'].validate((valid) => {
				if (valid) {
					this.$http({
						url: this.$http.adornUrl("/agent/agent"),
						method: this.agentId?'put':'post',
						data: this.$http.adornData({
							agentId:this.agentId,
							agentName: this.dataForm.agentName,
							agentPhone: this.dataForm.agentPhone,
							// agentLat: this.dataForm.lat,
							// agentLng: this.dataForm.lng,
							province: this.dataForm.province,
							city: this.dataForm.city,
							agentAddress: this.dataForm.agentAddress,
							remark: this.dataForm.remark
						})
					}).then(({data}) => {
						this.$message({
							message:'操作成功',
							type:'success'
						})
						this.visible = false
						this.$emit("refreshDataList")
					})
				}
			})
		},

		addrSelect(data){
      this.dataForm.province = data.province.value
      this.dataForm.city = data.city.value
      this.dataForm.agentAddress = data.area.value
      console.log(data);
      this.$refs.dataForm.validateField('address');
		},
    province(data){
      this.$refs.dataForm.validateField('address');
    },
    city(data){
      this.$refs.dataForm.validateField('address');
    },
    area(data){
      this.$refs.dataForm.validateField('address');
    },

		

	},
  mounted(){
    this.BaiduMap.init()
  }
    
}
</script>

<style>
.el-input-group__append, .el-input-group__prepend{
		color: #02A1E9;
}
.distpicker-address-wrapper select{
  width: 134px;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  color: #606266;
}
.el-checkbox{
  margin-right: 0;
}
.first-row .el-input{
	width: 200px;
}
</style>

